<template>
  <div id="map" ref="rootmap">
  </div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer, Image as ImageLayer} from 'ol/layer';
import {OSM, ImageArcGISRest,TileWMS,ImageWMS} from 'ol/source';

export default{
  name: 'OlGeoserve',
  data(){
    return{
      map: null
    };
  },
  mounted(){
    let url = 'http://192.168.32.26:8080/geoserver/wms';
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()   //底图
        }),
        new ImageLayer({
          source: new ImageWMS({
            ratio: 1,
            params: {
              //'FORMAT': 'image/jpeg',   //jpeg地图底图将会被遮住
              'VERSION': '1.3.0',
              'LAYERS': 'wuyi:WYXZQ',
              'STYLES': 'wuyi:wuyiXZQSLD',
            },
            url: url
          })
        }),
        new ImageLayer({
          source: new ImageWMS({
            ratio: 1,
            params: {
              //'FORMAT': 'image/jpeg',   //jpeg地图底图将会被遮住
              'VERSION': '1.3.0',
              'LAYERS': 'wuyi:WYCBD',
              'STYLES': 'wuyi:wuyiCBD',
            },
            url: url
          })
        })
      ],
      view: new View({
        projection: 'EPSG:4326',
        center: [115.87,37.82],
        zoom: 11,
      })
    });

  }
};

</script>

<style>
#map{
  height:800px;
  width: 1400px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}

</style>
